<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="include :: header('课程视频学习')"/>

        <style>

            #video {
                /*width: 800px;*/
                /*height: 338px;*/
                margin: auto;
            }

            .flex {
                display: flex;
                align-content: center;
                justify-content: center;
            }

            #mse{
                height: auto !important;
            }
            .video-div {
                margin-top: 20px;
            }

            .right {
                margin-top: 45px;
                padding: 0px 25px ;
            }

            .right .title div{
                font-weight: bold;
                background-color: #3c8dbc;
                color: white;
                padding: 0 6px;
                margin-bottom: 10px;
            }

            .cover img {
                width: 80px;
                height: 80px;
            }
            .line{
                line-height: 25px;
            }

            .item-right{
                margin-top: 20px;
            }
            .intro{
                margin-top: 10px;
            }
        </style>
    </head>
    <body class="white-bg">
        <div class="row">
            <h3 style="text-align: center">[[${courseDetail.title}]]</h3>
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-8">
                <div class="row">
                    <div class="flex">
                        <span onclick="minus()" class="btn btn-primary" style="margin-right: 10px"><i class="fa fa-minus"></i> 缩小</span>
                        <span onclick="plus()" class="btn btn-primary"><i class="fa fa-plus"></i> 放大</span>
                    </div>
                </div>

                <div id="video" class="row flex" style="margin-left: 20px;margin-top: 10px">
                    <div id="mse"></div>
                </div>
            </div>
            <div class="col-sm-12 col-md-4 right">
                <div class="line title">
                    <div class="col-sm-12 " style="padding-left: 5px">专家介绍</div>
                </div>
                <div class="row">
                    <div class="col-sm-12 col-md-4 cover">
                            <img src="/img/avarta.jpg" th:if="${teacher.avarta} eq ''">
                            <img th:src="${teacher.host+teacher.avarta}" src="/img/avarta.jpg"
                                 th:if="${teacher.avarta} ne ''">
                    </div>
                    <div class="col-sm-12 col-md-8 item-right">
                        <div class="row line">
                            <div class="col-sm-12"><span>姓名：</span><span  th:text="${teacher.name}"></span></div>
                        </div>
                        <div class="row line">
                            <div class="col-sm-12"><span>单位：</span> <span th:text="${teacher.organization}"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm-12 line intro">
                    <span>&ensp;&ensp;&ensp;&ensp;</span>
                    <span class="txt" th:text="${teacher.introduce}"></span>

                </div>

                <div class="col-sm-10 line intro">
                    <div class="row">
                        <span th:onclick="readPPT([[${courseDetail.id}]])" class="btn btn-success "><i class="fa fa-file-powerpoint-o"></i> 查看讲义</span>
                        <span th:onclick="goExam([[${courseDetail.id}]])" id="btnExam" class="btn btn-primary " ><i class="fa fa-file-text-o"></i> 进入考试</span>
                        <span class="btn btn-warning " style="width:100px;margin-left: 0px" onclick="$.modal.closeTab();">关 闭</span>
                    </div>
                </div>
            </div>
        </div>


        <th:block th:include="include :: footer"/>
        <th:block th:include="include :: xgplayer-js"/>
        <script type="text/javascript">
            var url = '[[${courseDetail.host + courseDetail.videoUrl}]]'
            var courseDetailId = [[${courseDetail.id}]]
            var delta       = 50
            var videoHeight = 700
            var videoWidth  = 800
            var duration    = 0
            var currentTime = 0
            var canExam = !![[${canExam}]]

            setCanExam(canExam)
            let player = new Player({
                                        id: 'mse',
                                        autoplay: true,
                                        volume: 0.3,
                                        url: url,
                                        poster: "",
                                        playsinline: true,
                                        videoInit: true,
                                        fluid: true,
                                        fitVideoSize: 'fixWidth',
                                        // disableProgress: false , //禁止进度条拖动交互
                                        // lastPlayTime: 20, //视频起播时间（单位：秒）
                                        lastPlayTimeHideDelay: 5, //提示文字展示时长（单位：秒）
                                        keyShortcut: 'on',
                                        allowSeekPlayed: true,
                                        keyShortcutStep: { //设置调整步长
                                            // currentTime: 15, //播放进度调整步长，默认10秒
                                            volume: 0.2 //音量调整步长，默认0.1
                                        },
                                        "playbackRate": [
                                            0.8,
                                            1,
                                            1.2,
                                            1.5,
                                            2.0
                                        ]

                                    });
            player.once('ready', () => {
                console.log('ready')

                player.on('requestFullscreen', function () {
                    let widowHeight = window.innerHeight
                    let widowWidth = window.innerWidth
                    console.log(`进入全屏，widowHeight=${widowHeight},widowWidth=${widowWidth}`)
                })

                player.on('exitFullscreen', function () {
                    console.log('-----退出全屏---')
                })

                player.on('error', function (error) {
                    console.log('-----视频播放器发生 error-----')
                    console.log(error)
                })

                player.on('ended', function () {
                    console.log('-----视频播放结束---时长：' + player.duration)
                    setCanExam(true)
                    let data = {
                        courseDetailId,
                        materialType:'video',
                        done:1,
                        progress:player.duration
                    }
                    recordLearningHistory(data)
                })

                player.on('timeupdate', function (v) {
                    currentTime = player.currentTime
                    duration    = player.duration
                    //console.log(`duration = ${duration},currentTime = ${currentTime}`)

                })
            })

            function minus() {
                videoHeight -= delta
                videoWidth -= delta
                $('#video').css('width', videoWidth + 'px')
                console.log(`videoWidth=${videoWidth}`)
            }

            function plus() {
                videoHeight += delta
                videoWidth += delta
                $('#video').css('width', videoWidth + 'px')
                console.log(`videoWidth=${videoWidth}`)
            }

            function readPPT(id){
                const url = ctx + "biz/courseNav/ppt/"+id
                $.modal.openTab("查看讲义", url);
            }

            function goExam(id){

                if ($('#btnExam').attr('disabled')){
                    $.modal.msgError('视频观看完才能进入考试')
                    return false
                }

                const url = ctx + "biz/courseNav/exam/"+id
                $.modal.openTab("课程考试", url);
            }

            function setCanExam(flag){
                $('#btnExam').attr('disabled',!flag)
            }

            function recordLearningHistory(data){
                $.post(ctx+"biz/courseNav/recordLearn",data,function (res){
                    console.log('------recordLearningHistory--------')
                    console.log(res)
                })
            }
        </script>
    </body>
</html>